<template>
  <div class="page">
    <el-tabs
      style="width: 600px; margin: 20px 0 0 20px"
      v-model="activeName"
      @tab-click="handleClick"
    >
      <el-tab-pane label="账号信息" name="0"></el-tab-pane>
      <el-tab-pane label="个人资料" name="1"></el-tab-pane>
      <el-tab-pane label="简历上传" name="2"></el-tab-pane>
    </el-tabs>
    <!-- 账号 -->
    <el-form
      v-if="activeName == '0'"
      class="form"
      :label-position="labelPosition"
      label-width="80px"
      size="medium"
    >
      <el-form-item label="账号名">
        <span>{{ userInfo.name }}</span>
      </el-form-item>
      <el-form-item label="账号">
        <span>{{ userInfo.phone }}</span>
      </el-form-item>
      <el-form-item label="账号角色">
        <!-- <span>{{ userInfo.role }}</span> -->
        <span>学生</span>
      </el-form-item>
      <template v-if="isNewPass">
        <el-form-item label="新密码">
          <el-input show-password v-model="pass1"></el-input>
        </el-form-item>
        <el-form-item label="再次输入">
          <el-input show-password v-model="pass2"></el-input>
        </el-form-item>
      </template>
      <el-form-item>
        <el-button v-if="!isNewPass" type="info" @click="isNewPass = true"
          >修改密码</el-button
        >
        <el-button v-if="isNewPass" type="info" @click="isNewPass = false"
          >取消</el-button
        >
        <el-button v-if="isNewPass" type="primary" @click="changePassword"
          >保存</el-button
        >
      </el-form-item>
    </el-form>
    <!-- 个人资料 -->
    <el-form
      v-if="activeName == '1'"
      class="form"
      :label-position="labelPosition"
      label-width="80px"
      size="medium"
    >
      <el-form-item label="姓名">
        <el-input v-model="student.name"></el-input>
      </el-form-item>
      <el-form-item label="姓别">
        <el-select v-model="student.Sex" style="width: 100%">
          <el-option label="男" :value="0"> </el-option>
          <el-option label="女" :value="1"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="专业">
        <el-select v-model="student.major" filterable style="width: 100%">
          <el-option
            v-for="(item, index) in majorOption"
            :key="index"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="入学年份">
        <el-date-picker
          v-model="student.year"
          type="year"
          style="width: 100%"
          value-format="yyyy"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="平均成绩">
        <el-input v-model="student.score"></el-input>
      </el-form-item>
      <el-form-item label="平均绩点">
        <el-input v-model="student.gpa"></el-input>
      </el-form-item>
      <el-form-item label="擅长技能">
        <el-input
          v-model="student.skill"
          type="textarea"
          maxlength="250"
          show-word-limit
          :autosize="{ minRows: 2, maxRows: 4 }"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="求职方向">
        <el-input
          v-model="student.direction"
          type="textarea"
          maxlength="250"
          show-word-limit
          :autosize="{ minRows: 2, maxRows: 4 }"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="简介">
        <el-input
          v-model="student.introduction"
          type="textarea"
          maxlength="250"
          show-word-limit
          :autosize="{ minRows: 2, maxRows: 4 }"
        >
        </el-input>
      </el-form-item>
      <!-- <el-form-item label="简历图片">
        <el-input v-model="student.resume"></el-input>
        <img
              class="el-upload-list__item-thumbnail"
              :src="student.resume"
              alt=""
            />
      </el-form-item> -->
      <el-form-item>
        <el-button v-if="editType == 'edit'" type="primary" @click="saveStudent"
          >保存</el-button
        >
        <el-button
          v-if="editType == 'init'"
          type="primary"
          @click="initNewStudent"
          >保存</el-button
        >
      </el-form-item>
    </el-form>
    <!-- 简历图片上传 -->
    <el-form
      v-if="activeName == '2'"
      class="form"
      :label-position="labelPosition"
      label-width="80px"
      size="medium"
    >
      <el-form-item label="注意">
        <span>上传简历图片后企业默认可查看你的简历</span>
      </el-form-item>
      <el-form-item label="上传简历图片">
        <el-upload action="#" list-type="picture-card" :on-change="handleChange" :file-list="resumeImageUrl" :limit="1" :auto-upload="false">
          <i slot="default" class="el-icon-plus"></i>
          <div slot="file" slot-scope="{ file }">
            <img
              class="el-upload-list__item-thumbnail"
              :src="file.url"
              alt=""
            />
            <span class="el-upload-list__item-actions">
              <span
                class="el-upload-list__item-preview"
                @click="handlePictureCardPreview(file)"
              >
                <i class="el-icon-zoom-in"></i>
              </span>
              <!-- <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleDownload(file)"
              >
                <i class="el-icon-download"></i>
              </span> -->
              <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleRemove(file)"
              >
                <i class="el-icon-delete"></i>
              </span>
            </span>
          </div>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="uploadResume">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { cookieData, localData } from "@/util/local";
import { getStudentById, SetStudent, NewStudent } from "@/api/student";
import { resetPassword, userChange } from "@/api/user";
import { majorOption } from "../../../util/selectOption";
import axios from 'axios'
export default {
  data() {
    return {
      resumeImageUrl:[],
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
      //----------
      activeName: "",
      labelPosition: "right",
      student: {
        name: "",
        major: "",
        year: "",
        score: "",
        gpa: "",
        skill: "",
        direction: "",
        introduction: "",
        resume: "",
        Sex: 0,
      },
      pass1: "",
      pass2: "",
      userInfo: {},
      editType: "init",
      isNewPass: false,
      majorOption: majorOption,
    };
  },
  methods: {
    handleClick() {
      this.resumeImageUrl = []
      if (this.activeName != "0" && this.editType == "edit") {
        this.getStudent();
      } else {
        this.student = {
          name: "",
          major: "",
          year: "",
          score: 0,
          gpa: 0,
          skill: "",
          direction: "",
          introduction: "",
          // resume: "",
          Sex: 0,
        };
      }
    },
    getStudent() {
      const param = {
        id: this.userInfo.student_id,
      };
      getStudentById(param).then((res) => {
        if (res.code == 200) {
          let {
            name,
            Sex,
            major,
            year,
            score,
            gpa,
            skill,
            direction,
            introduction,
            resume,
          } = res.data;
          this.student = {
            name,
            Sex,
            major,
            year,
            score,
            gpa,
            skill,
            direction,
            introduction,
            resume,
          };
          if(this.activeName == "2"&&res.data.resume){
            this.resumeImageUrl.push({name:"简历.png",url:resume})
          }
          console.log(this.resumeImageUrl)
        }
      });
    },
    saveStudent() {
      const param = { ...this.student, id: this.userInfo.student_id };
      SetStudent(param).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: "保存成功",
            type: "success",
          });
        }
      });
    },
    initNewStudent() {
      const param = { ...this.student };
      NewStudent(param).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: "保存成功",
            type: "success",
          });
          this.editType = "edit";
          let id = res.data.student.id;
          this.userInfo.student_id = id;
          localData("set", "userinfo", this.userInfo);
          const param2 = {
            id: this.userInfo.id,
            student_id: this.userInfo.student_id,
          };
          userChange(param2).then((res) => {
            console.log("个人信息保存成功");
          });
        }
      });
    },
    changePassword() {
      if (!this.pass1) {
        this.$message({
          showClose: true,
          message: "请填写密码",
          type: "warning",
        });
        return;
      }
      if (!this.pass2) {
        this.$message({
          showClose: true,
          message: "请确认密码",
          type: "warning",
        });
        return;
      }
      if (this.pass2 != this.pass1) {
        this.$message({
          showClose: true,
          message: "两次密码输入不一致",
          type: "warning",
        });
        return;
      }
      const param = {
        id: this.userInfo.id,
        password: this.pass1,
      };
      resetPassword(param).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: "修改成功，请用新密码重新登录",
            type: "success",
          });
          cookieData("clean", "token");
          localData("clean", "userinfo");
          this.$router.push({ path: "/login" });
        }
      });
    },
    //上传简历相关
    handleRemove(file) {
      console.log(file);
      this.resumeImageUrl.pop()
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(this.resumeImageUrl);
    },
    handleChange(file) {
      if(this.resumeImageUrl.length == 0){
        this.resumeImageUrl.push(file)
      }else{
        this.$message({
          showClose: true,
          message: "只能上传一张简历",
          type: "warning",
        });
      }
      console.log(this.resumeImageUrl);
    },
    uploadResume(){
      if(this.resumeImageUrl.length ===0 ){ //清空简历图片
        this.student.resume = ""
        this.saveStudent()
        return
      }
      if(this.resumeImageUrl[0].url.indexOf('https://ftp.bmp.ovh')!=-1){
        this.$message({
            message: "保存成功",
            type: "success",
          });
          return
      }
      let config = {
	        timeout: 30000,
	        headers: {
	          "Content-Type": "multipart/form-data",//设置headers
	        }
		  }
		  const formData = new FormData()
			formData.append('file', this.resumeImageUrl[0].raw);//传参改为formData格式
      axios
	        .post(
	          "/img/upload/ftp",//请求后端的url
	          formData,
	          config
	        )
	        .then(res => {
            console.log(res.url)
            this.student.resume = res.url
            this.saveStudent()
	        })
	        .catch(error => {
	          //请求失败
	        });
      }
  },
  created() {
    this.userInfo = localData("get", "userinfo");
    this.editType = this.userInfo.student_id ? "edit" : "init";
  },
};
</script>

<style scoped>
/* .page {
  min-height: 100vh;
} */
.page .form {
  width: 400px;
  margin: 20px;
}
</style>